<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-06 22:31:42
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-23 16:41:13
 * @FilePath: /tuberculosis_screening_display_system/src/components/Schedule.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container" ref="domRef" class="container"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'Schedule',
  props: {
    title: String
  },
  setup() {
    const domRef = ref<HTMLElement>();

    function create(container: HTMLElement) {
      const chart = echarts.init(container);
      const option = {
        title: {
          text: 'World Population',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
          },
        ],
      };
      chart.setOption(option);
      return chart;
    }

    onMounted(() => {

      if (domRef.value) {
        create(domRef.value);
      }
    });

    return {
      domRef,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 500px;
}
</style>

